<template>
  <div class="login-container">
    <div class="login-box">
      <div class="page-account-top">
        <div class="page-account-top-logo">
          <img src="~@/assets/logo.png" alt="logo" />
        </div>
        <div class="page-account-top-desc">
          <h3>wevoov admin</h3>
        </div>
      </div>
      <Form
        :model="formItem"
        :rules="ruleValidate"
        ref="loginForm"
        label-position="top"
      >
        <FormItem prop="userName">
          <Input
            size="large"
            prefix="ios-contact"
            v-model="formItem.userName"
            placeholder="Enter User Name"
          ></Input>
        </FormItem>
        <FormItem prop="password">
          <Input
            size="large"
            prefix="md-lock"
            v-model="formItem.password"
            type="password"
            placeholder="Enter password"
          ></Input>
        </FormItem>
        <FormItem prop="verifyCode">
          <Row type="flex" :gutter="16">
            <Col span="14">
              <Input
                type="text"
                maxlength="4"
                size="large"
                placeholder="Enter code"
                v-model="formItem.verifyCode"
              />
            </Col>
            <Col span="10">
              <img
                class="img-code-url"
                @click="handleGetImgCode"
                :src="imgCodeUrl"
              />
            </Col>
          </Row>
        </FormItem>
        <FormItem>
          <Button
            type="primary"
            :loading="loading"
            size="large"
            long
            @click="handleLogin"
            >Login</Button
          >
        </FormItem>
      </Form>
    </div>
  </div>
</template>
<script>
/**
 * 登录
 */
import { login, getImageCode } from "@/api/user.js";
import { mapActions } from "vuex";
export default {
  data() {
    return {
      formItem: {
        userName: "",
        password: "",
        verifyCode: ""
      },
      imgCodeUrl: "",
      loading: false,
      ruleValidate: {
        userName: [
          { required: true, message: "enter user name", trigger: "blur" }
        ],
        password: [
          { required: true, message: "enter password", trigger: "blur" }
        ],
        verifyCode: [{ required: true, message: "enter code", trigger: "blur" }]
      }
    };
  },
  created() {
    this.handleGetImgCode();
  },
  methods: {
    ...mapActions({
      setUserInfo: "user/setUserInfo"
    }),
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          login(this.formItem)
            .then(({ data }) => {
              this.setUserInfo(data).then(() => {
                this.$route.push("/");
              });
            })
            .catch(() => {})
            .finally(() => {
              this.loading = false;
            });
        }
      });
    },
    handleGetImgCode() {
      getImageCode().then(({ data }) => {
        this.imgCodeUrl = "data:image/png;base64," + data.verifyPic;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.login-container {
  width: 100%;
  height: 100%;
  background-image: url("~@/assets/login_bg.svg");
  background-size: cover;
  background-repeat: no-repeat;
  .login-box {
    margin: 0 auto;
    width: 350px;
    max-width: 350px;
    .page-account-top {
      padding: 32px 0;
      text-align: center;
      .page-account-top-logo img {
        margin: 0 auto;
        height: 75px;
      }
    }
    .img-code-url {
      width: 95px;
      height: 25px;
      cursor: pointer;
    }
  }
}
</style>
